<template>
  <div class="dialog_car" :style="{ 'top': `${props.y + 100}px`, 'left': `${props.x - 300}px` }">
    <div class="dialog_car_header">
      <div class="route_name">
        {{ props.dialog_data.endStation }}
      </div>
      <div class="car_msg">
        <span class="car_num">{{ props.dialog_data.plateNo }} ({{ props.dialog_data.numbered }} ) </span>
        <span class="car_driver">驾驶员:{{ props.dialog_data.driverName }}</span>
        <span class="car_driver">部位:{{ props.dialog_data.place }}</span>
      </div>
      <div class="dialog_hide" @click="() => emit('closeDilog')">X</div>
    </div>
    <div class="dialog_car_main">
      <div class="car_speed_detail">
        <div class="speed_meter">
          <span class="value">{{ props.dialog_data.speed }}</span>
          <span>km/h</span>
        </div>
        <div class="speed_station">
          <div class="speed_station_time"><span>{{ props.dialog_data.planTime }}</span> → <span>{{
            props.dialog_data.actualTime }}</span></div>
          <div class="speed_station_station"><span>{{ props.dialog_data.stationName }}站</span><span>{{
            props.dialog_data.endStationName }}站</span></div>
        </div>
      </div>
      <div class="car_basic_detail">
        <div class="basic_timer">
          <span class="basic_font">定位时间:{{ props.dialog_data.lastGpsTime }}</span>
          <span class="basic_font">前车距: {{ props.dialog_data.distanceFrontVehicle
          }}({{ props.dialog_data.distanceFrontVehicleStation }})</span>
          <span class="basic_font">后车距: {{ props.dialog_data.distanceBehindVehicle
          }}({{ props.dialog_data.distanceBehindVehicleStation }})</span>
        </div>
        <div class="basic_state">
          <span class="basic_font">调度状态:{{ props.dialog_data.operationalStatus === 0 ? '运营中' : '离线' }}</span>
          <span class="basic_font">车辆状态:{{ props.dialog_data.online === 0 ? '在线' : '离线' }}</span>
          <span class="basic_font">运营状态:{{ props.dialog_data.operationalStatus === 0 ? '正常' : '不正常' }}</span>
        </div>
        <div class="sigin_time">
          <span class="basic_font">签到时间:{{ props.dialog_data.driverCheckInTime }}</span>
        </div>
      </div>
    </div>
    <!-- <div class="dialog_car_btn">
      <div v-for="item in methods" :key="item.btn" class="methods_btn" @click="handelClick(item)">{{ item.btn }}</div>
    </div> -->
  </div>
  <!-- 二次弹窗组件 -->
  <!-- <div class="window" v-show="isShow" >
    <component :is="activeComponent" class="content" @closeWindow="closeWindow" :dialog_data="props.dialog_data"></component>
  </div> -->
</template>

<script setup>
import { nextTick } from "vue"
import { useRoute } from "vue-router";
import DispatchSet from './components/dispatchSet'
import TracjReplay from './components/trackReplay'
import VideoMonitor from './components/videoMonitor'
import SendNote from './components/sendNote'
import Checkline from './components/checkline'
import ChangeSendTime from './components/changeSendTime'

const props = defineProps({
  x: Number,
  y: Number,
  dialog_data: Object,
})

// console.log('这个是腹肌组件穿过拉爹书数据', props.dialog_data);

const activeComponent = ref()
const isShow = ref(false)

function closeWindow(e) {
  isShow.value = false
}

const methods = ref([
  {
    btn: '调度设置',
    compontent: DispatchSet,
  },
  {
    btn: '轨迹回放',
    compontent: TracjReplay,
  },
  {
    btn: '视频监控',
    compontent: VideoMonitor,
  },
  {
    btn: '短信下发',
    compontent: SendNote,
  },
  // {
  //   btn:'语音对讲',
  {
    btn: '切换线路',
    compontent: Checkline,
  },
  {
    btn: '发车时间修改',
    compontent: ChangeSendTime,
  }
])

function handelClick(item) {
  isShow.value = true
  activeComponent.value = item.compontent
}

const emit = defineEmits('closeDilog')
nextTick(() => {
  const dialog_car = document.querySelector('.dialog_car')
  dialog_car.style.left = props.x
  dialog_car.style.top = props.y
})
</script>

<style lang="scss" scoped>
.dialog_car {
  position: fixed;
  display: flex;
  flex-direction: column;
  width: 632px;
  height: 308px;
  background: #091940;
  border: 1px solid #9BAFD6;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
  opacity: 0.95;
  border-radius: 10px;
  overflow: hidden;
  z-index: 9;

  .dialog_car_header {
    display: flex;
    height: 40px;
    border-bottom: 1px #8DA0C7 solid;

    .dialog_hide {
      // width: 20px;
      height: 100%;
      line-height: 40px;
      margin-right: 10px;
      color: #fff;
      cursor: pointer;
    }

    .route_name {
      height: 100%;
      width: 77px;
      line-height: 40px;
      font-size: 16px;
      color: #fff;
      text-align: center;
      background-color: #668ff5;
    }

    .car_msg {
      flex: 1;
      margin-left: 20px;
      line-height: 40px;
      color: #fff;
      font-size: 16px;

      .car_num {
        margin-right: 20px;
      }

      .car_driver {
        font-size: 12px;
        margin-right: 10px;
      }
    }
  }

  .dialog_car_main {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px 26px;

    .car_speed_detail {
      margin-bottom: 15px;
      display: flex;
      align-items: center;

      .speed_meter {
        display: flex;
        padding-top: 20px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 120px;
        height: 60px;
        color: #1CCFEB;
        background: url('./img/speed_meter.png') no-repeat;
        background-size: contain;

        .value {
          font-weight: bold;
          font-size: 16px;
        }
      }

      .speed_station {
        margin-left: 40px;
        color: #fff;

        .speed_station_time {
          font-size: 26px !important;
          font-weight: 600;

          span {
            padding: 0 30px;
          }
        }

        .speed_station_station {
          margin-left: 30px;

          span {
            margin-right: 70px;
          }
        }
      }
    }

    .car_basic_detail {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      color: #fff;

      .basic_font {
        font-size: 16px;
        margin-right: 30px;
      }
    }
  }

  .dialog_car_btn {
    padding: 0 10px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 50px;
    background-color: #1c2f61;
    border-top: 1px #8DA0C7 solid;

    .methods_btn {
      box-sizing: border-box;
      cursor: pointer;
      font-size: 14px;
      padding: 2px 5px;
      border-radius: 4px;
      border: 1px #668ff5 solid;
      background-color: #091940;
      color: #fff;

      &:hover {
        background-color: #668ff5;
      }
    }
  }
}

.window {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99;

  .content {
    width: 860px;
    padding: 20px;
    background: #091940;
    border: 1px solid #9BAFD6;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    opacity: 0.95;
    color:#9BAFD6;
  }
}
</style>